<template>
<q-page class="bg-grey-10">
    <div v-show="isLoadData" class="column items-center justify-center" :style="
        $q.platform.is.mobile
          ? 'position:fixed;left:0;top:100px;right:0;bottom:0'
          : 'position:absolute;left:0;right:0;top:50px;bottom:0px'
      ">
        <q-spinner-hourglass color="primary" size="5em" />
        数据加载中，请稍等……
    </div>
    <div v-if="filelists.length <= 0 && !isLoadData" :style="
        $q.platform.is.mobile
          ? 'position:fixed;left:0;top:100px;right:0;bottom:50px'
          : 'position:absolute;left:0;right:0;top:50px;bottom:0px'
      " class="column flex-center text-grey">
        <q-icon size="55px">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                <title>note-search-outline</title>
                <path d="M15 3H5C3.89 3 3 3.89 3 5V10.82C3.6 10.24 4.28 9.8 5 9.5V5H12V10.82C12.03 10.85 12.07 10.87 12.1 10.9C12.44 11.24 12.73 11.61 12.97 12H19V19H12.97C12.73 19.39 12.44 19.76 12.1 20.1C11.74 20.45 11.35 20.74 10.94 21H19C20.11 21 21 20.11 21 19V9L15 3M14 10V4.5L19.5 10H14M7.5 11C5 11 3 13 3 15.5C3 16.38 3.25 17.21 3.69 17.9L.61 21L2 22.39L5.12 19.32C5.81 19.75 6.63 20 7.5 20C10 20 12 18 12 15.5S10 11 7.5 11M7.5 18C6.12 18 5 16.88 5 15.5S6.12 13 7.5 13 10 14.12 10 15.5 8.88 18 7.5 18Z" />
            </svg>
        </q-icon>
        <span class="q-mt-md">--暂无成品--</span>
    </div>
    <q-scroll-area v-if="!isLoadData && filelists.length > 0" :visible="false" :thumb-style="{
        right: '4px',
        borderRadius: '5px',
        backgroundColor: '#009688',
        width: '5px',
        opacity: 0.75,
      }" :bar-style="{
        right: '2px',
        borderRadius: '9px',
        backgroundColor: '#03a9f4',
        width: '9px',
        opacity: 0.2,
      }" :style="
        $q.platform.is.mobile
          ? 'position:fixed;left:0;top:100px;right:0;bottom:50px'
          : 'position:absolute;left:0;right:0;top:50px;bottom:0px'
      ">
        <q-card flat square class="q-px-sm bg-transparent">
            <div class="row wrap">
                <div v-for="(item, index) in folderList" :key="index" class="bg-hide q-pa-sm no-border col-6 col-sm-4 col-md-3 col-lg-2">
                    <q-card @dragenter="dragenter($event)" @dragover="dragover($event)" @drop="handleFileDrop($event, item.pv_id)" flat class="transparent">
                        <q-responsive :ratio="16 / 14" :ref="item.pv_id" :style="backgroundImage" style="background-repeat: no-repeat; background-size: contain">
                            <q-card-section class="q-pa-none">
                                <q-responsive :ratio="16 / 8" @click="handleEnterFolder(item)">
                                    <div class="column wrap q-pa-sm justify-center"></div>
                                </q-responsive>
                                <q-responsive :ratio="16 / 6">
                                    <div class="column wrap q-pa-sm justify-center">
                                        <div style="width: 100%" class="col-5 ellipsis" :title="item.vc_name">
                                            {{ item.vc_name }}
                                        </div>
                                        <div class="row col-7 items-center justify-between">
                                            <div class="row no-wrap items-center">
                                                <q-avatar class="q-mr-sm" size="20px">
                                                    <img :src="item.avatar" alt="创建者" />
                                                </q-avatar>
                                                <div class="tipsfont column" style="font-size: 10px">
                                                    <div style="font-size: 10px">
                                                        {{ item.vc_ctime }}
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="">
                                                <i class="q-mr-xs fas fa-ellipsis-v" color="grey-1"></i>
                                                <q-menu>
                                                    <q-list dense style="min-width: 100px">
                                                        <q-item clickable v-close-popup>
                                                            <q-item-section @click="handleshare(item)">
                                                                <div class="row items-center no-wrap">
                                                                    <q-icon class="q-mr-sm" name="mdi-share-outline" />
                                                                    分享
                                                                </div>
                                                            </q-item-section>
                                                        </q-item>
                                                        <q-item clickable v-close-popup>
                                                            <q-item-section @click="handleRenameFolder(item)">
                                                                <div class="row items-center no-wrap">
                                                                    <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                                                    重命名
                                                                </div>
                                                            </q-item-section>
                                                        </q-item>

                                                        <q-separator />
                                                        <q-item v-if="user.right >= 4" clickable v-close-popup>
                                                            <q-item-section @click="handleDeleteFolder(item)">
                                                                <div class="row items-center no-wrap">
                                                                    <q-icon class="q-mr-sm" name="mdi-trash-can-outline" />
                                                                    删除
                                                                </div>
                                                            </q-item-section>
                                                        </q-item>
                                                    </q-list>
                                                </q-menu>
                                            </div>
                                        </div>
                                    </div>
                                </q-responsive>
                            </q-card-section>
                        </q-responsive>
                    </q-card>
                </div>
                <div class="col-grow"></div>
                <div class="col-grow"></div>
            </div>
        </q-card>

        <q-card flat square class="q-pa-sm bg-transparent">
            <div class="fit row wrap" ref="videoContainer">
                <div v-for="(item, index) in filelists" :key="index" class="bg-hide q-pa-sm no-border col-6 col-sm-4 col-md-3 col-lg-2">
                    <q-card ref="videoCard" draggable="true" class="shadow-10" @dragstart="drag($event, item.work_id)">
                        <q-responsive @click="handlevideo(item)" :ratio="16 / 9" :ref="item.work_id">
                            <q-card-section @mousemove="handlepreview($event, item, index)" @mouseout="handlemouseout($event, item, index)" class="q-pa-none" :style="item.backimg">
                                <q-badge class="q-ma-sm q-pa-xs bg-tm" align="middle">version: {{ item.version }}.0
                                </q-badge>
                                <q-badge align="middle" v-show="!item.isprogressshow" class="q-ma-sm q-pa-xs bg-tm" style="position: absolute; bottom: 5px; left: 0">{{ item.videoinfo.format.duration }}</q-badge>
                                <q-badge v-if="item.status == 0" align="middle" class="q-ma-sm q-pa-xs" style="
                      position: absolute;
                      top: 2px;
                      right: 0;
                      backdrop-filter: blur(5px);
                    " outline color="red-6">正在转码</q-badge>
                                <q-badge v-if="item.status == 1" align="middle" class="q-ma-sm q-pa-xs" style="
                      position: absolute;
                      top: 2px;
                      right: 0;
                      backdrop-filter: blur(5px);
                    " @click.stop="handleChangeStatus(item)" outline color="cyan-4">待审核</q-badge>
                                <q-badge v-if="item.status == 2" align="middle" class="q-ma-sm q-pa-xs" style="
                      position: absolute;
                      top: 2px;
                      right: 0;
                      backdrop-filter: blur(5px);
                    " @click.stop="handleChangeStatus(item)" outline color="yellow-6">审核中</q-badge>
                                <q-badge v-if="item.status == 3" align="middle" class="q-ma-sm q-pa-xs" style="
                      position: absolute;
                      top: 2px;
                      right: 0;
                      backdrop-filter: blur(5px);
                    " @click.stop="handleChangeStatus(item)" outline color="green-4">审核完成</q-badge>
                                <q-badge v-if="item.wf_id" align="middle" class="q-ma-sm q-pa-xs" style="
                      position: absolute;
                      bottom: 2px;
                      right: 0;
                      backdrop-filter: blur(5px);
                    " outline color="green-4">已交付</q-badge>
                                <q-linear-progress v-if="item.isprogressshow" :value="item.progress" style="position: absolute; bottom: 0" class="shadow-7" size="md" track-color="grey-8" color="teal-11" />
                            </q-card-section>
                        </q-responsive>
                        <q-responsive :ratio="16 / 7">
                            <div class="column wrap bg-grey-10 q-pa-sm justify-center">
                                <div style="width: 100%" class="col-5 ellipsis" :title="item.name">
                                    {{ item.name }}
                                </div>
                                <div class="row col-7 items-center justify-between">
                                    <div class="row no-wrap items-center">
                                        <q-avatar class="q-mr-sm" size="20px">
                                            <img :src="item.avatar" alt="创建者" />
                                        </q-avatar>
                                        <div class="tipsfont column" style="font-size: 10px">
                                            <div style="font-size: 10px">
                                                {{ item.ctime }}
                                            </div>
                                            <div style="font-size: 10px">
                                                {{ item.videoinfo.format.size }}

                                                <i class="q-mx-sm fas fa-comments"></i>
                                                {{ item.count ? item.count : "0" }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="">
                                        <i class="q-mr-xs fas fa-ellipsis-v" color="grey-1"></i>
                                        <q-menu>
                                            <q-list dense style="min-width: 100px">
                                                <q-item clickable v-close-popup>
                                                    <q-item-section @click="handleshare(item)">
                                                        <div class="row items-center">
                                                            <q-icon class="q-mr-sm" name="mdi-share-outline" />
                                                            分享
                                                        </div>
                                                    </q-item-section>
                                                </q-item>
                                                <q-item clickable v-close-popup>
                                                    <q-item-section @click="handlerename(item)">
                                                        <div class="row items-center">
                                                            <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                                            重命名
                                                        </div>
                                                    </q-item-section>
                                                </q-item>
                                                <q-item v-if="user.right >= 4" clickable v-close-popup>
                                                    <q-item-section @click="handleApplyVideo(item)">
                                                        <div class="row items-center no-wrap">
                                                            <q-icon class="q-mr-sm" name="mdi-download" />
                                                            交付成片
                                                        </div>
                                                    </q-item-section>
                                                </q-item>
                                                <q-separator />
                                                <q-item v-if="user.right >= 4" clickable v-close-popup>
                                                    <q-item-section @click="handledelete(item)">
                                                        <div class="row items-center">
                                                            <q-icon class="q-mr-sm" name="mdi-trash-can-outline" />
                                                            删除
                                                        </div>
                                                    </q-item-section>
                                                </q-item>
                                            </q-list>
                                        </q-menu>
                                    </div>
                                </div>
                            </div>
                            <q-menu context-menu>
                                <q-list dense style="min-width: 100px">
                                    <q-item clickable v-close-popup>
                                        <q-item-section @click="handleshare(item)">
                                            <div class="row items-center">
                                                <q-icon class="q-mr-sm" name="mdi-share-outline" />
                                                分享
                                            </div>
                                        </q-item-section>
                                    </q-item>
                                    <q-item clickable v-close-popup>
                                        <q-item-section @click="handlerename(item)">
                                            <div class="row items-center">
                                                <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                                重命名
                                            </div>
                                        </q-item-section>
                                    </q-item>
                                    <q-item v-if="user.right >= 4" clickable v-close-popup>
                                        <q-item-section @click="handleApplyVideo(item)">
                                            <div class="row items-center no-wrap">
                                                <q-icon class="q-mr-sm" name="mdi-download" />
                                                交付成片
                                            </div>
                                        </q-item-section>
                                    </q-item>
                                    <q-separator />
                                    <q-item v-if="user.right >= 4" clickable v-close-popup>
                                        <q-item-section @click="handledelete(item)">
                                            <div class="row items-center">
                                                <q-icon class="q-mr-sm" name="mdi-trash-can-outline" />
                                                删除
                                            </div>
                                        </q-item-section>
                                    </q-item>
                                </q-list>
                            </q-menu>
                        </q-responsive>
                    </q-card>
                </div>
            </div>
            <q-card-section class="q-pt-none"> </q-card-section>
        </q-card>
    </q-scroll-area>
    <q-dialog v-model="isrename" persistent>
        <q-card>
            <q-card-section class="row items-center">
                <div class="column">
                    <div class="text-h6">重命名</div>
                    <div class="q-my-sm">当前作品名称：{{ curvideo.name }}</div>
                    <q-input v-model="curvideo.newname" label="新名称" />
                </div>
            </q-card-section>

            <q-card-actions align="right">
                <q-btn flat label="取消" color="primary" v-close-popup />
                <q-btn flat label="确认" color="primary" @click="confirmrename" />
            </q-card-actions>
        </q-card>
    </q-dialog>
    <q-dialog v-model="isCreateFolder" persistent>
        <q-card>
            <q-card-section class="row items-center">
                <div class="column">
                    <div class="text-body1">新建文件夹</div>
                    <q-input v-model="folderName" label="文件夹名称" />
                </div>
            </q-card-section>

            <q-card-actions align="right">
                <q-btn flat label="取消" color="primary" v-close-popup />
                <q-btn flat label="确认" color="primary" @click="createFolder" />
            </q-card-actions>
        </q-card>
    </q-dialog>
    <q-dialog v-model="isRenameFolder" persistent>
        <q-card>
            <q-card-section class="row items-center">
                <div class="column">
                    <div class="text-h6">重命名</div>
                    <div class="q-my-sm">当前文件夹名称：{{ curFolder.name }}</div>
                    <q-input v-model="curFolder.newName" label="新名称" />
                </div>
            </q-card-section>

            <q-card-actions align="right">
                <q-btn flat label="取消" color="primary" v-close-popup />
                <q-btn flat label="确认" color="primary" @click="confirmRenameFolder" />
            </q-card-actions>
        </q-card>
    </q-dialog>
    <q-dialog v-model="isTypeChange" :full-width="$q.platform.is.mobile">
        <q-card class="bg-dark" :style="$q.platform.is.desktop ? 'min-width:400px' : ''">
            <q-card-section class="q-pa-none">
                <q-toolbar class="bg-grey-7 text-white">
                    <div>审阅状态</div>

                    <q-space />

                    <q-btn dense flat icon="close" v-close-popup> </q-btn>
                </q-toolbar>
            </q-card-section>

            <q-card-section class="back-dark q-gutter-sm">
                <q-select filled dark v-model="status" map-options emit-value :options="statusOptions" option-label="name" option-value="value" label="修改状态" />
            </q-card-section>
            <q-card-actions align="right">
                <q-btn outline color="white" @click="handleUpdateWorkType" label="确认"></q-btn>
            </q-card-actions>
        </q-card>
    </q-dialog>
    <q-dialog v-model="isUpload" persistent>
        <q-card>
            <q-card-section class="row items-center q-pa-sm">
                <div class="column">
                    <q-uploader flat draggable :auto-upload="false" label="上传视频" multiple class="bolder-line" accept=".mp4" @added="handleAddFiles" @rejected="handleRejectFiles" @removed="handleRemoveFiles">
                        <template v-slot:header="scope">
                            <div class="row no-wrap justify-between">
                                <div class="q-pa-sm">
                                    <div>上传文件</div>
                                    <div class="text-caption">文件类型：.mp4</div>
                                </div>
                                <q-btn v-if="scope.canAddFiles" type="a" icon="add_box" round dense flat>
                                    <q-uploader-add-trigger />
                                </q-btn>
                                <q-btn v-if="scope.canUpload" icon="cloud_upload" @click="scope.upload" round dense flat>
                                    <q-tooltip>Upload Files</q-tooltip>
                                </q-btn>
                            </div>
                        </template>
                        <template v-slot:list="scope">
                            <q-list v-if="fileList.length == 0">
                                <q-item class="row items-center text-caption">
                                    <q-item-label class="full-width column items-center q-gutter-sm ellipsis">
                                        <span>将文件拖到此处</span>
                                        <span class="text-italic text-primary">或点击选择
                                            <q-uploader-add-trigger /></span>
                                    </q-item-label>
                                    <div class="row items-center text-caption"></div>
                                </q-item>
                            </q-list>

                            <q-list separator>
                                <q-item v-for="file in scope.files" :key="file.__key">
                                    <q-item-section>
                                        <q-item-label class="full-width ellipsis">
                                            {{ file.name }}
                                        </q-item-label>
                                        <q-item-label caption>
                                            {{ file.__sizeLabel }}
                                        </q-item-label>
                                    </q-item-section>

                                    <q-item-section v-if="file.__img" thumbnail class="gt-xs">
                                        <img :src="file.__img.src" />
                                    </q-item-section>

                                    <q-item-section side>
                                        <q-btn class="gt-xs" size="12px" flat dense round icon="delete" @click="scope.removeFile(file)" />
                                    </q-item-section>
                                </q-item>
                            </q-list>
                        </template>
                    </q-uploader>

                    <!-- <el-upload ref="upload" class="upload-demo" drag :multiple="true" :action="uploadurl" accept=".mov,.mp4" :auto-upload="false" :on-change="handleChange" :headers="uploadheaders" :on-remove="handleremovefile">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或<em>点击上传</em>
                        </div>
                        <div class="el-upload__tip" slot="tip">
                            上传文件类型：mov、mp4视频文件
                        </div>
                    </el-upload> -->
                </div>
            </q-card-section>

            <q-card-actions align="right">
                <q-btn outline label="上传" icon="upload" color="primary" @click="submitUpload" />
                <q-btn outline label="取消" color="primary" v-close-popup />
            </q-card-actions>
        </q-card>
    </q-dialog>
    <q-dialog persistent fixed v-model="isApplyDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
        <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
            <q-header class="bg-grey-10 shadow-7">
                <q-toolbar>
                    <q-toolbar-title>交付成片</q-toolbar-title>
                    <q-space />

                    <q-btn dense flat icon="close" @click="handleApplyVideoDialogClose">
                    </q-btn>
                </q-toolbar>
            </q-header>

            <q-footer class="bg-grey-10 text-white q-pa-sm shadow-up-7">
                <q-toolbar v-if="curApplyItem" class="justify-between">
                    <q-space></q-space>
                    <!-- <q-btn outline class="q-px-md q-mr-sm" @click="handleCreateCollectionFolder">
                      <q-icon name="mdi-folder-outline" class="q-mr-sm"></q-icon> 新建
                  </q-btn> -->
                    <q-btn v-if="curApplyItem.key_status==0" outline class="q-px-md" @click="submitApplyVideo"> 确认交付</q-btn>
                    <q-btn v-if="curApplyItem.key_status!=0" outline class="q-px-md q-mr-sm" @click="isEmailDialod=true"> 发送邮箱</q-btn>
                    <q-btn v-if="curApplyItem.key_status!=0" outline class="q-px-md" @click="copyLink"> 复制链接</q-btn>
                </q-toolbar>
            </q-footer>
            <q-page-container>
                <q-page v-if="curApplyItem" class="bg-dark column hide-scrollbar" style="padding-top: 45px">
                    <div v-if="curApplyItem.key_status!=0" class="q-gutter-sm">
                        <div class="row items-center q-pt-sm">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                链接：
                            </div>

                            <div class="col-9 text-grey-6 row items-center">
                                https://pan.yfyh.cc/{{ curApplyItem.wf_id }}
                            </div>
                        </div>
                        <div class="row items-center">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                提取码：
                            </div>

                            <div class="col-9 text-grey-6 row items-center">
                                {{ curApplyItem.share_code }}
                            </div>
                        </div>
                        <div class="row items-center">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                文件状态：
                            </div>

                            <div class="col-9 text-grey-6 row items-center">
                                <q-badge v-if="curApplyItem.key_status==1" color="primary">上传中</q-badge>
                                <q-badge v-if="curApplyItem.key_status==2" color="cyan">已上传</q-badge>
                            </div>
                        </div>
                        <div class="row items-center">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                创建时间：
                            </div>

                            <div class="col-9 text-grey-6 row items-center">
                                {{ curApplyItem.format_stime }}
                            </div>
                        </div>
                        <div class="row items-center">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                创建人：
                            </div>

                            <div class="col-9 text-grey-6 row items-center">
                                <q-chip outline color="cyan" text-color="white">
                                    <q-avatar>
                                        <img :src="curApplyItem.avatar">
                                    </q-avatar>
                                    <div class="ellipsis">
                                        {{ curApplyItem.username }}

                                    </div>
                                </q-chip>
                            </div>
                        </div>
                        <div class="row items-center">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                链接状态：
                            </div>

                            <div class="col-9 text-grey-6 row items-center">
                                <q-badge v-if="curApplyItem.isValid==1" color="green-6" outline>生效中</q-badge>
                                <q-badge v-if="curApplyItem.isValid==0" color="red-6" outline>已失效</q-badge>
                                <q-btn v-if="curApplyItem.isValid==0" @click="handleRefreshApply" flat round dense icon="mdi-refresh"></q-btn>
                            </div>
                        </div>
                        <div class="row items-center">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                失效时间：
                            </div>

                            <div class="col-9 text-grey-6 row items-center">
                                {{ curApplyItem.validate_time }}
                            </div>
                        </div>
                        <div class="row items-center">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                点击次数：
                            </div>

                            <div class="col-9 text-grey-6 row items-center">
                                {{ curApplyItem.click_times }}
                            </div>
                        </div>
                        <div class="row items-center">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                下载次数：
                            </div>

                            <div class="col-9 text-grey-6 row items-center">
                                {{ curApplyItem.download_times }}
                            </div>
                        </div>
                    </div>
                    <div v-if="curApplyItem.key_status==0">
                        <div class="row items-center">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                有效期
                            </div>

                            <div class="q-gutter-sm col-9 text-grey-6">
                                <q-radio dark v-model="expire" :val="0" label="永久" />
                                <q-radio dark v-model="expire" :val="30" label="30天" />
                                <q-radio dark v-model="expire" :val="7" label="7天" />
                                <q-radio dark v-model="expire" :val="3" label="3天" />
                            </div>
                        </div>
                        <div class="row items-center">
                            <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                提取码
                            </div>
                            <div class="column">
                                <div class="q-gutter-sm row col-9 text-grey-6">
                                    <q-input dense filled dark v-model="code" :rules="[
                      val => !!val || '请输入提取码',
                      val => val.length >= 4 || '提取码长度最小为4',
                    ]" lazy-rules maxlength="6"></q-input>
                                    <div>
                                        <q-btn flat rounded @click="handleRandomCode">
                                            <div class="row items-center no-wrap">
                                                <q-icon name="mdi-gesture-tap"></q-icon>
                                                <q-tooltip>随机</q-tooltip>
                                            </div>
                                        </q-btn>
                                    </div>
                                </div>
                                <div></div>
                            </div>
                        </div>
                    </div>

                    <q-inner-loading :showing="isApplyLoad" class="bg-grey-10 text-grey-6">
                        <q-spinner-cube color="primary" size="50px" class="q-mb-sm" />
                        数据加载中……
                    </q-inner-loading>
                    <q-dialog v-model="isRefreshDialod">
                        <q-card dark>
                            <q-card-section class="row items-center q-pa-sm">
                                <div class="column">
                                    <div class="row items-center no-wrap">
                                        <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                            有效期
                                        </div>

                                        <div class="col-9 text-grey-6">
                                            <q-radio dark v-model="expire" :val="0" label="永久" />
                                            <q-radio dark v-model="expire" :val="30" label="30天" />
                                            <q-radio dark v-model="expire" :val="7" label="7天" />
                                            <q-radio dark v-model="expire" :val="3" label="3天" />
                                        </div>
                                    </div>
                                    <div class="row items-center no-wrap">
                                        <div class="col-3 text-grey-6 row justify-end q-pr-sm">
                                            提取码
                                        </div>
                                        <div class="column">
                                            <div class="q-gutter-sm row col-9 text-grey-6 no-wrap">
                                                <q-input dense filled dark v-model="code" :rules="[
                            val => !!val || '请输入提取码',
                            val => val.length >= 4 || '提取码长度最小为4',
                          ]" lazy-rules maxlength="6"></q-input>
                                                <div>
                                                    <q-btn flat rounded @click="handleRandomCode">
                                                        <div class="row items-center no-wrap">
                                                            <q-icon name="mdi-gesture-tap"></q-icon>
                                                            <q-tooltip>随机</q-tooltip>
                                                        </div>
                                                    </q-btn>
                                                </div>

                                            </div>
                                            <div></div>
                                        </div>
                                    </div>

                                </div>
                            </q-card-section>

                            <q-card-actions align="right">
                                <q-btn outline label="更新" @click="handleRefreshApplyVideo" color="primary" />
                                <q-btn outline label="取消" color="primary" v-close-popup />
                            </q-card-actions>
                        </q-card>
                    </q-dialog>
                    <q-dialog v-model="isEmailDialod">
                        <q-card dark>
                            <q-card-section class="row items-center q-pa-sm">
                                发送至邮箱
                            </q-card-section>

                            <q-card-section class="row items-center q-pa-sm">
                                <q-input dark v-model="email" filled label="邮箱"></q-input>
                            </q-card-section>

                            <q-card-actions align="right">
                                <q-btn outline label="发送" :loading="isEmailLoad" @click="handleSendApplyEmail" color="primary" />
                                <q-btn outline label="取消" color="primary" v-close-popup />
                            </q-card-actions>
                        </q-card>
                    </q-dialog>

                    <q-page-sticky position="top" expand>
                        <div class="text-white q-pt-sm full-width bg-dark">
                            <tips-title :title="curApplyItem.name"></tips-title>
                        </div>
                    </q-page-sticky>
                </q-page>
            </q-page-container>
        </q-layout>
    </q-dialog>
    <q-dialog persistent fixed v-model="isNasUploadDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down" @show="loadWorkFolder">
      <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
          <q-header class="bg-grey-10 shadow-7">

              <q-toolbar>
                  <q-toolbar-title>Nas成片上传</q-toolbar-title>
                  <q-space />

                  <q-btn dense flat icon="close" @click="isNasUploadDialog=false">
                  </q-btn>
              </q-toolbar>

          </q-header>
          <!-- <q-footer class="bg-grey-10 text-white q-pa-sm shadow-up-7">

        <q-toolbar inset>

            <q-space></q-space>
            <q-btn outline class="q-px-md q-mr-sm" @click="cancleCreateProject"> 取消</q-btn>
            <q-btn outline class="q-px-md" @click="submitCreateProject"> 创建</q-btn>
        </q-toolbar>
    </q-footer> -->
          <q-page-container>
              <q-page class="bg-dark row hide-scrollbar">
                  <q-tree ref="nasWorkTree" dark :nodes="nasWorkTree" node-key="id" class="full-width" label-key="name" no-selection-unset :selected.sync="workSelected" @lazy-load="onLazyLoad">
                      <template v-slot:default-header="prop">
                          <q-list dense class="full-width">
                              <q-item clickable @click="handleNasWorkItemClick(prop.node)" :active="prop.node.id==workSelected" active-class="bg-teal-6" class="row items-center justify-between  ">
                                  <q-menu @show="handleFolderSelect(prop.node)" touch-position context-menu dark>

                                      <q-list dense style="min-width: 100px">
                                          <q-item v-if="prop.node.id!='111'" clickable v-close-popup>
                                              <q-item-section>
                                                  <div class="row items-center">
                                                      <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                                      重命名
                                                  </div>
                                              </q-item-section>
                                          </q-item>
                                          <!-- <q-item clickable v-close-popup>
                                              <q-item-section>
                                                  <div class="row items-center">
                                                      <q-icon class="q-mr-sm" name="mdi-folder-outline" />
                                                      新建文件夹
                                                  </div>
                                              </q-item-section>
                                          </q-item> -->
                                          <q-separator dark />
                                          <q-item clickable v-close-popup @click="handleUploadNasWork(prop.node)">
                                              <q-item-section>
                                                  <div class="row items-center">
                                                      <q-icon class="q-mr-sm" name="mdi-upload" />
                                                      {{ prop.node.isUpload?'已上传':'上传' }}
                                                  </div>
                                              </q-item-section>
                                          </q-item>

                                      </q-list>

                                  </q-menu>
                                  <div class="column col-grow">
                                    <div class="row items-center">
                                      <q-icon :name="prop.node.icon" color="cyan-6" size="28px" class="q-mr-sm" />
                                      <div class="text-weight-bold text-white">{{ prop.node.name }}</div>

                                      <q-badge v-if="prop.node.isUpload" outline :color="prop.node.id==workSelected?'white':'green'" class="q-ml-sm">已上传</q-badge>
                                    </div>

                                    <div class="row items-center">
                                      <div class="text-caption q-mr-md " :class="prop.node.id==workSelected?'text-white':'text-grey'" v-if="!prop.node.isDirectory">{{ prop.node.ctime }}</div>
                                      <div class="text-caption " :class="prop.node.id==workSelected?'text-white':'text-grey'" v-if="!prop.node.isDirectory">{{ prop.node.size }}</div>
                                    </div>
                                  </div>
                                  <div class="">
                                   <q-btn dense round flat color="white" icon="mdi-dots-vertical"  size="12px"></q-btn>

                                    <q-menu @show="handleFolderSelect(prop.node)"   dark>

                                      <q-list dense style="min-width: 100px">
                                          <q-item v-if="prop.node.id!='111'" clickable v-close-popup>
                                              <q-item-section>
                                                  <div class="row items-center no-wrap">
                                                      <q-icon class="q-mr-sm" name="mdi-rename-box" />
                                                      重命名
                                                  </div>
                                              </q-item-section>
                                          </q-item>
                                          <!-- <q-item clickable v-close-popup>
                                              <q-item-section>
                                                  <div class="row items-center no-wrap">
                                                      <q-icon class="q-mr-sm" name="mdi-folder-outline" />
                                                      新建文件夹
                                                  </div>
                                              </q-item-section>
                                          </q-item> -->
                                          <q-separator dark />
                                          <q-item clickable v-close-popup @click="handleUploadNasWork(prop.node)">
                                              <q-item-section>
                                                  <div class="row items-center no-wrap">
                                                      <q-icon class="q-mr-sm" name="mdi-upload" />
                                                      {{ prop.node.isUpload?'已上传':'上传' }}
                                                  </div>
                                              </q-item-section>
                                          </q-item>

                                      </q-list>

                                  </q-menu>
                                </div>




                              </q-item>
                          </q-list>

                      </template>
                  </q-tree>

                  <q-inner-loading :showing="isLoading" class="bg-grey-10 text-grey-6">
                      <q-spinner-cube color="primary" size="50px" class="q-mb-sm" />
                      数据加载中……
                  </q-inner-loading>

              </q-page>
          </q-page-container>

      </q-layout>

  </q-dialog>
    <q-page-sticky position="top" expand>
        <q-toolbar square class="q-pa-none back-dark shadow-3 full-width">
            <q-breadcrumbs class="row items-center q-pl-sm text-body1">
                <q-breadcrumbs-el label="视频资源" icon="mdi-file-video-outline" />
            </q-breadcrumbs>
            <q-space></q-space>

            <q-btn dense flat :ripple="{ center: true }" icon="mdi-sort" @click="refreshVideo">
                <q-tooltip>排序</q-tooltip>
            </q-btn>
            <q-btn dense flat :ripple="{ center: true }" icon="mdi-refresh" @click="refreshVideo">
                <q-tooltip>刷新项目数据</q-tooltip>
            </q-btn>
            <q-btn class="q-py-sm q-pr-sm q-ma-xs q-mr-md" dense flat :ripple="{ center: true }" icon="mdi-plus-box-multiple-outline">
                <q-badge class="q-mt-sm" color="orange" floating>{{
            taskNum
          }}</q-badge>
                <q-menu v-model="isUploadMenu" anchor="bottom end" self="top right">
                    <q-card>
                        <q-card-section class="q-py-sm no-shadow">

                            <q-btn dense icon="ti-cloud-up" class="q-my-sm q-mr-sm" size="12px" color="primary" label="上传" @click="handleUploadVideo"></q-btn>
                            <q-btn dense icon="ti-folder" class="q-my-sm q-mr-sm" size="12px" color="primary" label="新建" @click="handleCreateFolderPop"></q-btn>
                        </q-card-section>
                        <q-card-section class="q-pa-none no-shadow">
                            <q-table title="任务列表" :data="data" :columns="columns" row-key="name">
                                <template v-slot:no-data="{ noDataMsg }">
                                    <div class="full-width row flex-center text-grey-10 q-gutter-sm">
                                        <q-icon size="2em" name="ti-package" />
                                        <span> 暂时没有上传任务{{ noDataMsg }} </span>
                                        <!-- <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon" /> -->
                                    </div>
                                </template>
                                <template v-slot:body="props">
                                    <q-tr :props="props">
                                        <q-td key="name" :props="props">
                                            {{ props.row.name }}
                                        </q-td>
                                        <q-td key="fileSize" :props="props">
                                            {{ props.row.fileSize }}
                                        </q-td>
                                        <q-td key="process" :props="props">
                                            <q-linear-progress stripe rounded size="25px" style="min-width: 100px" :value="props.row.process / 100" color="accent">
                                                <div class="absolute-full flex flex-center">
                                                    <q-badge color="white" text-color="accent" :label="
                                props.row.isUploaded
                                  ? props.row.process + '%'
                                  : props.row.statusMsg
                              " />
                                                </div>
                                            </q-linear-progress>
                                        </q-td>
                                        <q-td key="status" :props="props">
                                            <div v-if="props.row.status == '0'">
                                                <q-badge color="yellow-10"> 待开始 </q-badge>
                                            </div>
                                            <div v-if="props.row.status == '1'">
                                                <q-badge color="blue-10"> 上传中 </q-badge>
                                            </div>

                                            <q-badge v-if="props.row.status == '2'" color="green-6">
                                                已完成
                                            </q-badge>
                                            <div v-if="props.row.status == '3'">
                                                <q-badge color="red-6"> 失&emsp;败 </q-badge>
                                            </div>
                                        </q-td>
                                        <q-td key="action" :props="props">
                                            <div v-if="props.row.status == '0'">
                                                <q-btn icon="mdi-delete-forever-outline" outline size="12px" color="red-6" dense>
                                                    <q-tooltip>删除任务</q-tooltip>
                                                </q-btn>
                                            </div>

                                            <div v-if="
                            props.row.status == '2' || props.row.status == '1'
                          ">
                                                <q-btn icon="mdi-minus-circle-outline" outline size="12px" color="green-6" dense>
                                                    <q-tooltip>移除任务</q-tooltip>
                                                </q-btn>
                                            </div>

                                            <div v-if="props.row.status == '3'">
                                                <q-btn icon="mdi-restart" outline size="12px" color="yellow-10" dense>
                                                    <q-tooltip>重新上传</q-tooltip>
                                                </q-btn>
                                            </div>
                                        </q-td>
                                    </q-tr>
                                </template>
                            </q-table>
                        </q-card-section>
                    </q-card>
                </q-menu>
            </q-btn>
            <q-btn v-if="user.right >= 4" dense outline icon="mdi-lan" class="q-my-sm q-mr-sm" size="12px" color="primary" label="Nas上传" @click="handleUploadNasVideoDialog"></q-btn>
        </q-toolbar>
    </q-page-sticky>

</q-page>
</template>

<script>
import folderSvg from "assets/icons/studio/folder.svg";
import {
    copyToClipboard
} from "quasar";
import {
    deleteVideo,
    videoRename,
    createFolder,
    loadFolderList,
    moveFile,
    renameFolder,
} from "assets/api/studio";
import {
    date
} from "quasar";
import storage from "assets/utils/storage";
import {
    loadfilelist
} from "assets/api/studio";
import {
    getSeconds
} from "assets/utils/stodate";
import SparkMD5 from "spark-md5";
import {
    fileParse
} from "assets/utils/fileparse";
import {
    uploadvideo,
    mergeVideo,
    searchMD5,
    checkuploadfile,
    updateWorkStatus,
    applyVideo,
    getApplyedVideo,
    updateVideoApplyStatus,
    refreshApplyVideo,
    sendApplyEamil,
    getNasProjectFolder,
    uploadNasVideo
} from "assets/api/work";
export default {
    name: "WorkRootPage",
    props: {
        projectinfo: {
            type: Object,
        },
    },
    data() {
        return {
            isNasUploadDialog: false,
            isLoading: true,
            nasWorkTree: [{
                id: 111,
                name: '10_成片',
                icon: 'mdi-folder-outline',
                isDirectory: true,
                children: []
            }],
            workSelected: '',
            email: '',
            isLoadData: true,
            taskNum: 0,
            isUploadMenu: false,
            noDataMsg: "",
            backgroundImage: {
                backgroundImage: "url(" + folderSvg + ")",
            },
            columns: [{
                    name: "name",
                    required: true,
                    label: "文件名",
                    align: "left",
                    field: (row) => row.name,
                },
                {
                    name: "fileSize",
                    required: true,
                    label: "大小",
                    align: "center",
                    field: (row) => row.fileSize,
                },
                {
                    name: "process",
                    align: "center",
                    label: "进度",
                    field: (row) => row.process,
                },
                {
                    name: "status",
                    label: "状态",
                    field: (row) => row.status,
                    sortable: true,
                },
                {
                    name: "action",
                    label: "操作",
                    field: (row) => row.status,
                    sortable: true,
                },
            ],
            data: [],
            pid: "",
            isrename: false,
            curvideo: {},
            uploadheaders: [],
            formfields: [],
            backimg: {
                backgroundImage: "url(http://121.196.19.223:3000/upload/studio/video/YFYH2101042323/202101304130/newthumb/thumb.jpg)",
                backgroundPosition: " 0px 0px",
                backgroundSize: "auto 100%",
            },
            imgInfo: {},
            isprogressshow: false,
            progress: 0,
            filelists: [],
            fileList: [],
            blockStyle: {
                "min-width": "180px",
                " min-height": "180px",

                "margin-top": "0px !important",
            },
            isCreateFolder: false,
            folderName: "新建文件夹",
            folderList: [],
            curDraggedWorkId: "",
            isRenameFolder: false,
            curFolder: {
                name: "",
                newName: "",
            },
            isUpload: false,
            uploadurl: "",
            fileList: [],
            uploadheaders: {},
            uploadres: [],
            isupload: false,
            isWechat: false,
            status: 1,
            curItem: "",
            isTypeChange: false,
            statusOptions: [{
                    value: 1,
                    name: "待审核",
                },
                {
                    value: 2,
                    name: "审核中",
                },
                {
                    value: 3,
                    name: "审核完成",
                },
            ],
            isApplyDialog: false,
            curApplyItem: null,
            currentItem: null,
            expire: 3,
            validateCode: 0,
            code: "YFYH",
            isApplyLoad: true,
            isRefreshDialod: false,
            isEmailDialod: false,
            isEmailLoad: false,
            user:{
              right:0
            }
        };
    },
    watch: {},
    created() {
        if (window.__wxjs_environment === "miniprogram") {
            this.isWechat = true;
        }
        this.pid = this.$route.params.pid;
        this.projectInfo = this.$store.state.projectinfo;
    },
    mounted() {
        this.loadFolderList();
        this.loadfilelists();
        let user = storage.getItem("user");
        this.user = this.$store.state.user;

        this.uploadheaders = {
            name: "Authorization",
            value: user.token,
        };
        this.formfields.push({
            name: "pid",
            value: this.pid,
        });

        this.i_name = setInterval(() => {
            this.projectInfo = this.$store.state.projectinfo;
            this.user = this.$store.state.user;

            if (this.projectInfo.name) {
                document.title = this.projectInfo.name + "--成品";
                clearInterval(this.i_name);
            }
        }, 500);
    },
    beforeDestroy() {},
    methods: {
        handleUploadNasWork(item) {

            if(item.isUpload) return
            this.$q.loading.show()
            let projectFolder = this.projectInfo.project_id + this.projectInfo.name
            let projectPath = `/${projectFolder}/10_成片`
            let reqData = {
                pid: this.projectInfo.pid,
                filePath: projectPath + item.path,
                name: item.name
            }
            console.log(reqData);

            uploadNasVideo(reqData).then(res => {
                this.$q.loading.hide()
                console.log(res.data);
                if (res.data.code == 1) {
                    this.$message.success('上传完成！')
                    this.loadFolderList();
                    this.loadfilelists();
                    item.isUpload = true;
                }
            })
        },
        handleFolderSelect(item) {
            // let tree = this.$refs.effectTree
            this.workSelected = item.id
        },
        handleNasWorkItemClick(item) {
            ////console.log(item);
            if (item.isDirectory) {
                let tree = this.$refs.nasWorkTree
                if (tree.isExpanded(item.id)) {
                    tree.setExpanded(item.id, false)
                } else {
                    tree.setExpanded(item.id, true)
                }

            }

        },
        handleUploadNasVideoDialog() {
            this.isNasUploadDialog = true;
            this.isLoading = true;

        },
        loadWorkFolder() {
            let projectFolder = this.projectInfo.project_id + this.projectInfo.name
            let reqdata = {
                projectPath: `/${projectFolder}/10_成片`,
                askPath: ''
            }
            getNasProjectFolder(reqdata).then(res => {
                console.log(res.data);
                this.isLoading = false
                if (res.data.code == 1) {
                    let data = res.data.data;
                    if (data.length > 0) {
                        let folderList = []
                        let fileList = []
                        data.forEach(i => {
                            if (i.isDirectory) {
                                i.icon = "mdi-folder-outline"
                                i.expandable = true
                                i.lazy = true
                                folderList.push(i)
                            } else {
                              i.size = (i.info.size/1024/1024).toFixed(2)+'MB'
                              i.ctime = this.$moment(i.info.ctime).format('YYYY-MM-DD HH:mm')
                                let arr = i.name.split('.');
                                let ext = "." + arr[arr.length - 1];
                                let rawname = i.name.replace(ext, '');


                                let index = this.filelists.findIndex(item => item.name == rawname)

                                if (index == -1) {
                                    i.isUpload = false
                                } else {
                                    i.isUpload = true
                                }
                                if (/.mp4|.mov/ig.test(i.name)) {
                                    i.type = 'video'
                                    i.icon = 'mdi-movie-outline'
                                } else if (/.jpg|.png/ig.test(i.name)) {
                                    i.type = 'image'
                                    i.icon = 'mdi-image-outline'
                                } else {
                                    i.type = 'others'
                                    i.icon = 'mdi-file-document-outline'
                                }
                                fileList.push(i)
                            }
                        })
                        let newFilelist = folderList.concat(fileList)
                        this.nasWorkTree[0].children = newFilelist
                        let tree = this.$refs.nasWorkTree
                        tree.expandAll()
                    } else {
                        this.$message.warn('Nas成片文件夹为空！')

                    }

                }
            })
        },
        onLazyLoad({
            node,
            key,
            done,
            fail
        }) {
            // call fail() if any error occurs
            let projectFolder = this.projectInfo.project_id + this.projectInfo.name
            let reqdata = {
                projectPath: `/${projectFolder}/10_成片`,
                askPath: `${node.path}`
            }
            //console.log(node,reqdata);
            getNasProjectFolder(reqdata).then(res => {
                //console.log(res.data);
                this.isLoading = false
                if (res.data.code == 1) {
                    let data = res.data.data;
                    if (data.length > 0) {
                        let folderList = []
                        let fileList = []
                        data.forEach(i => {
                            if (i.isDirectory) {
                                i.icon = "mdi-folder-outline"
                                i.expandable = true
                                i.lazy = true
                                folderList.push(i)
                            } else {
                              i.size = (i.info.size/1024/1024).toFixed(2)+'MB'
                              i.ctime = this.$moment(i.info.ctime).format('YYYY-MM-DD HH:mm')
                                let arr = i.name.split('.');
                                let ext = "." + arr[arr.length - 1];
                                let rawname = i.name.replace(ext, '');


                                let index = this.filelists.findIndex(item => item.name == rawname)

                                if (index == -1) {
                                    i.isUpload = false
                                } else {
                                    i.isUpload = true
                                }
                                if (/.mp4|.mov/ig.test(i.name)) {
                                    i.type = 'video'
                                    i.icon = 'mdi-movie-outline'
                                } else if (/.jpg|.png/ig.test(i.name)) {
                                    i.type = 'image'
                                    i.icon = 'mdi-image-outline'
                                } else {
                                    i.type = 'others'
                                    i.icon = 'mdi-file-document-outline'
                                }
                                fileList.push(i)
                            }
                        })
                        done(folderList.concat(fileList))
                    } else {
                        this.$message.warn('文件夹为空！')
                        done()
                    }

                }
            })

            // setTimeout(() => {
            //     // simulate loading and setting an empty node
            //     if (key.indexOf('Lazy load empty') > -1) {
            //         done([])
            //         return
            //     }

            //     const label = node.label
            //     done()
            // }, )
        },

        handleRandomCode() {
            this.code = this.randomCode();
        },
        randomCode() {
            // 所需随机抽取的样本数组
            var nums = new Array(
                "q",
                "w",
                "e",
                "r",
                "t",
                "y",
                "u",
                "i",
                "o",
                "p",
                "a",
                "s",
                "d",
                "f",
                "g",
                "h",
                "j",
                "k",
                "z",
                "x",
                "c",
                "v",
                "b",
                "n",
                "m",
                "A",
                "W",
                "E",
                "R",
                "T",
                "Y",
                "U",
                "O",
                "P",
                "A",
                "S",
                "D",
                "F",
                "G",
                "H",
                "J",
                "K",
                "L",
                "Z",
                "X",
                "C",
                "V",
                "B",
                "N",
                "M",
                "0",
                "2",
                "3",
                "4",
                "5",
                "6",
                "7",
                "8",
                "9"
            );
            // 初始化 拼接字符串
            var str = "";
            var i = 0;
            for (i = 0; i < 4; i++) {
                //遍历拼接颜色色值 eg 000000

                var p = Math.floor(Math.random() * 1000) % 59;
                //拼接验证码  随机颜色 随机字号 随机抽取大小写字母和数字
                str += nums[p];
            }
            return str;
        },
        handleSendApplyEmail() {
            this.isEmailLoad = true
            sendApplyEamil({
                email: this.email,
                link: 'https://pan.yfyh.cc/' + this.curApplyItem.wf_id + "?code=" + this.curApplyItem.share_code,
                name: this.curApplyItem.name,
                code: this.curApplyItem.share_code
            }).then(res => {
                if (res.data.code == 1) {
                    this.isEmailLoad = false
                    this.$message.success("邮件发送成功！");
                } else {
                    this.$message.error("邮件发送失败！");
                }
            })
        },
        handleRefreshApply() {
            this.isRefreshDialod = true;
        },
        reloadApplyVideo(work_id) {
            getApplyedVideo({
                work_id: work_id
            }).then(res => {
                console.log(res.data);
                if (res.data.code == 1) {
                    this.isApplyLoad = false;
                    let data = res.data.data;
                    if (data.length > 0) {
                        console.log(data);
                        let i = data[0];
                        i.format_stime = this.$moment(i.share_time, 'x').format('YYYY-MM-DD HH:mm')
                        i.validate_time = this.$moment(i.share_time, 'x').add(i.expire, 'd').format('YYYY-MM-DD HH:mm')
                        if (!this.$moment(new Date().getTime(), 'x').isBefore(i.validate_time, 'YYYY-MM-DD HH:mm')) {
                            i.isValid = 0;
                            updateVideoApplyStatus({
                                wf_id: i.wf_id
                            })
                        }

                        this.curApplyItem = data[0]
                    } else {

                    }
                }
            })
        },
        handleRefreshApplyVideo() {
            refreshApplyVideo({
                wf_id: this.curApplyItem.wf_id,
                expire: this.expire,
                code: this.code
            }).then(res => {
                if (res.data.code == 1) {
                    this.$message.success("更新链接成功！");
                    this.isRefreshDialod = false;
                    getApplyedVideo({
                        work_id: this.curApplyItem.work_id
                    }).then(res => {
                        console.log(res.data);
                        if (res.data.code == 1) {
                            this.isApplyLoad = false;
                            let data = res.data.data;
                            if (data.length > 0) {
                                console.log(data);
                                let i = data[0];
                                i.format_stime = this.$moment(i.share_time, 'x').format('YYYY-MM-DD HH:mm')
                                i.validate_time = this.$moment(i.share_time, 'x').add(i.expire, 'd').format('YYYY-MM-DD HH:mm')
                                if (!this.$moment(new Date().getTime(), 'x').isBefore(i.validate_time, 'YYYY-MM-DD HH:mm')) {
                                    i.isValid = 0;
                                    updateVideoApplyStatus({
                                        wf_id: i.wf_id
                                    })
                                }

                                this.curApplyItem = i
                                this.currentItem.wf_id = i.wf_id
                            } else {

                            }
                        }
                    })
                } else {
                    this.$message.error("更新链接失败！");
                }
            })
        },
        handleApplyVideo(item) {
            this.currentItem = item
            getApplyedVideo({
                work_id: item.work_id
            }).then(res => {
                console.log(res.data);
                if (res.data.code == 1) {
                    this.isApplyLoad = false;
                    let data = res.data.data;
                    if (data.length > 0) {
                        console.log(data);
                        let i = data[0];
                        i.format_stime = this.$moment(i.share_time, 'x').format('YYYY-MM-DD HH:mm')
                        i.validate_time = this.$moment(i.share_time, 'x').add(i.expire, 'd').format('YYYY-MM-DD HH:mm')
                        if (!this.$moment(new Date().getTime(), 'x').isBefore(i.validate_time, 'YYYY-MM-DD HH:mm')) {
                            i.isValid = 0;
                            updateVideoApplyStatus({
                                wf_id: i.wf_id
                            })
                        }

                        this.curApplyItem = data[0]
                    } else {
                        this.curApplyItem = item;
                    }
                }
            })

            this.isApplyDialog = true;
        },
        handleApplyVideoDialogClose() {
            this.isApplyDialog = false;
            this.curApplyItem = null;
            this.currentItem = null
        },
        copyLink() {
            let url = "https://pan.yfyh.cc/" + this.curApplyItem.wf_id + "?code=" + this.curApplyItem.share_code;
            let msg = `一方映画请您查收《${this.curApplyItem.name}》\n链接：${url}\n提取码：${this.curApplyItem.share_code}`;
            this.$copyText(msg)
                .then(() => {
                    this.$message.success("复制链接成功！");
                })
                .catch(() => {
                    this.$message.error("复制链接失败！");
                });
        },
        submitApplyVideo() {
            console.log(this.curApplyItem);
            let item = this.curApplyItem;
            let reqdata = {
                work_id: item.work_id,
                hdWorkUrl: item.hdworkurl,
                expire: this.expire,
                code: this.code,
                name: item.name,
                pName: this.projectInfo.name,
                project_id: this.projectInfo.project_id
            }
            applyVideo(reqdata).then(res => {
                if (res.data.code == 1) {
                    this.$message.success("提交成片交付任务成功！");
                    this.reloadApplyVideo(this.curApplyItem.work_id)

                } else {
                    this.$message.error("提交成片交付任务失败！");
                }
            })

        },

        handleChangeStatus(item) {
            if (this.user.right >= 4) {
                this.isTypeChange = true;
                this.status = item.status;
                this.curItem = item;
            }
        },
        handleUpdateWorkType() {
            if (this.user.right >= 4) {
                updateWorkStatus({
                    status: this.status,
                    work_id: this.curItem.work_id,
                }).then((res) => {
                    if (res.data.code == 1) {
                        this.$message.success("更改审阅状态成功");
                        this.isTypeChange = false;
                        this.filelists.find((i) => {
                            if (i.work_id == this.curItem.work_id) {
                                i.status = this.status;
                            }
                        });
                    } else {
                        this.$message.error("更改审阅状态失败");
                    }
                });
            }
        },
        async ParseFile(file) {
            let buffer = await fileParse(file, "buffer");
            return buffer;
        },
        testQueue() {
            let fileList = this.data;
            let fileNum = 0;
            fileList.forEach((v) => {
                if (v.status == 1) {
                    fileNum += 1;
                }
            });
            if (fileNum <= 2) {
                this.uploadTask();
            }
        },
        uploadTask() {
            let fileNum = 0;
            let fileList = this.data;
            console.log("文件列表", fileList);
            let taskNum = 0;
            fileList.forEach((v) => {
                if (v.status < 2) {
                    taskNum += 1;
                }
            });
            this.taskNum = taskNum;
            for (let index = 0; index <= fileList.length - 1; index++) {
                let v = fileList[index];
                console.log("数据", v);
                if (v.status == 0 && fileNum < 1) {
                    console.log("开始上传");
                    v.statusMsg = "文件解析中……";
                    v.status = 1;
                    v.isupload = false;
                    v.isload = true;
                    v.fileList = fileList;
                    let file = v.file;
                    v.name = file.name;

                    this.ParseFile(file).then((buffer) => {
                        v.statusMsg = "切片中……";
                        let spark = new SparkMD5.ArrayBuffer(),
                            hash,
                            suffix;
                        spark.append(buffer);
                        hash = spark.end();
                        suffix = /\.([0-9a-zA-Z]+)$/i.exec(file.name)[1];
                        // 每个文件2Mb来切片
                        let chunksize = 2 * 1024 * 1024;
                        let total = Math.ceil(file.size / chunksize);
                        v.total = total;
                        let partList = [],
                            cur = 0;
                        for (let i = 0; i < v.total; i++) {
                            let item = {
                                chunk: file.slice(cur, cur + chunksize),
                                filename: `${hash}_${i}.${suffix}`,
                            };
                            cur += chunksize;
                            partList.push(item);
                        }
                        v.statusMsg = "解析完成";
                        v.partList = partList;
                        v.hash = hash;
                        this.verifymd5(v);
                    });

                    fileNum = fileNum + 1;
                    console.log("正在上传的文件数", fileNum);
                }
            }
        },
        uploadSuccess(v) {
            v.status = 2;
            v.statusMsg = "上传成功！";
            this.testQueue();
            let num = 0;
            let fileList = this.data;
            fileList.forEach((v) => {
                if (v.status == 2) {
                    num += 1;
                }
            });
            if (num == fileList.length) {
                this.handlesuccess();
            }
        },

        submitUpload() {
            if (this.fileList.length > 0) {
                let fileList = this.fileList;
                fileList.forEach((v, i) => {
                    this.data.push({
                        name: v.name,
                        process: 0,
                        status: 0,
                        fileSize: (v.size / 1024 / 1024).toFixed(2) + "MB",
                        statusMsg: "上传队列中……",
                        isUploaded: false,
                        file: v,
                        fileList: [],
                        uploadres: [],
                        partList: [],
                        hash: "",
                        rawfilename: "",
                        total: 0,
                        isupload: false,
                        curchunk: 0,
                        check: 0,
                        checkedPartlist: [],
                        leftPartlist: [],
                        pid: this.pid,
                    });
                    this.isUpload = false;

                    this.fileList = [];
                });
                setTimeout(() => {
                    this.uploadTask();
                }, 500);

                // this.isload = true;
                // this.verifymd5();
            } else {
                this.$message.error("请先选择要上传的文件！");
            }
        },

        async handleChange(file, fileList) {
            console.log(fileList);
            this.fileList = fileList;
            this.isupload = true;
        },
        //文件校验

        async verifymd5(v) {
            v.statusMsg = "检查缓存……";
            let data = {
                md5: v.hash,
            };
            //检查是否数据库存在相同文件
            searchMD5(data).then((res) => {
                let data = res.data.data;
                if (data.length > 0) {
                    this.uploadSuccess(v);
                    return;
                }
                //检查本地缓存是否有上传过的分片文件
                var checklist = [];
                v.partList.map((item, index) => {
                    let fn = () => {
                        let filedata = {
                            hash: v.hash,
                            filename: item.filename,
                        };

                        checkuploadfile(filedata).then((res) => {
                            let data = res.data;
                            if (data.code == 11) {
                                v.curchunk += 1;
                            }
                            //将没有上传的分片文件push到新的文件数组
                            v.check += 1;
                            if (data.code == 10) {
                                v.checkedPartlist.push(item);
                            }
                            v.process = parseFloat(
                                ((this.curchunk / this.total) * 100).toFixed(2)
                            );
                            if (v.check == v.total) {
                                v.statusMsg = "检查缓存完成";
                                this.sendRequest(v);
                            }
                        });
                    };
                    checklist.push(fn);
                });
                var i = 0;
                let send = async () => {
                    if (i >= checklist.length) {
                        return;
                    }
                    await checklist[i]();
                    i++;

                    send();
                };
                send();
            });
        },
        //发送文件上传请求
        async sendRequest(v) {
            // 根据100个切片创造100个请求（集合）
            //开始真正上传，将checklist里没有上传的分片文件上传
            v.isUploaded = true;
            //分片文件已经全部上传完毕
            if (v.curchunk == v.total) {
                let complete = async () => {
                    let data = {
                        hash: v.hash,
                        rawfilename: v.rawfilename,
                        pid: this.pid,
                    };
                    await mergeVideo(data);
                };

                complete().then((res) => {
                    console.log("长传这儿", res);
                    this.uploadSuccess(v);
                    return;
                });
            }
            //上传剩余分片文件
            let requestList = [];
            v.checkedPartlist.map((item, index) => {
                // 每一个函数都是发送一个切片的请求
                let fn = () => {
                    let formData = new FormData();
                    formData.append("chunk", item.chunk);
                    formData.append("hash", v.hash);
                    formData.append("filename", item.filename);
                    uploadvideo(formData).then((res) => {
                        res = res.data;
                        if (res.code == 1) {
                            v.curchunk += 1;
                            // 传完的切片我们把它移除掉
                            if (v.curchunk == v.total) {
                                complete().then((res) => {
                                    console.log("上传完毕这儿", res);
                                    this.uploadSuccess(v);
                                    return;
                                });
                            }
                        } else {
                            v.leftPartlist.push(item);
                        }
                        v.process = parseFloat(((v.curchunk / v.total) * 100).toFixed(2));
                    });
                };
                requestList.push(fn);
            });

            // 传递：并行(ajax.abort())/串行(基于标志控制不发送)
            var i = 0;
            let complete = async () => {
                let data = {
                    hash: v.hash,
                    rawfilename: v.name,
                    pid: this.pid,
                };
                await mergeVideo(data);
            };
            let send = async () => {
                // 已经中断则不再上传
                // if (this.abort) return;
                if (i >= requestList.length) {
                    return;
                }
                await requestList[i]();
                i++;
                send();
            };
            send();
        },
        handleRaw(files) {
            console.log("raw", files);
        },
        handleAddFiles(files) {
            console.log("add files", files);

            this.fileList = this.fileList.concat(files);
            console.log("filelist", this.fileList);
        },
        handleRemoveFiles(file) {
            let index = this.fileList.findIndex((i) => i.name == file.name);
            if (index != -1) {
                this.fileList.splice(index, 1);
            }

            console.log("remove files", file);
        },
        handleRejectFiles(files) {
            console.log("reject files", files);
        },

        handlesuccess() {
            this.$message.success("上传完了！");
            this.loadFolderList();
            this.loadfilelists();
        },
        refreshVideo() {
            this.isLoadData = true;
            this.loadFolderList();
            this.loadfilelists();
        },

        handleUploadVideo() {
            this.isUpload = true;
        },
        handleEnterFolder(item) {
            this.$router.push("/works/" + this.pid + "/" + item.pv_id);
            // this.$router.push({
            //   name: "studioVideoFile",
            //   params: { pv_id: item.pv_id },
            // });
        },
        reloadFile() {
            this.loadFolderList();
            this.loadfilelists();
        },
        dragover(e) {
            e.preventDefault();
        },
        dragenter(e) {
            console.log(e);
        },
        drag(e, id) {
            console.log(e);
            this.curDraggedWorkId = id;
        },
        handleFileDrop(e, pv_id) {
            console.log("拖放文件", this.curDraggedWorkId, pv_id);
            moveFile({
                work_id: this.curDraggedWorkId,
                pv_id,
            }).then((res) => {
                if (res.data.code == 1) {
                    this.$q.notify({
                        color: "light-green-4",
                        icon: "far fa-check-circle",
                        position: "top",
                        textColor: "white",
                        message: "文件移动成功！",
                        timeout: "1500",
                    });
                    this.reloadFile();
                } else {
                    this.$q.notify({
                        color: "red-5",
                        textColor: "white",
                        icon: "warning",
                        position: "top",
                        timeout: "1500",
                        message: "文件移动失败！",
                    });
                }
            });
        },
        handleRenameFolder(item) {
            this.isRenameFolder = true;
            this.curFolder.name = item.vc_name;
            this.curFolder.pv_id = item.pv_id;
        },
        confirmRenameFolder() {
            renameFolder({
                pv_id: this.curFolder.pv_id,
                newName: this.curFolder.newName,
            }).then((res) => {
                if (res.data.code == 1) {
                    this.isCreateFolder = false;
                    this.$q.notify({
                        color: "light-green-4",
                        icon: "far fa-check-circle",
                        position: "top",
                        textColor: "white",
                        message: "重命名文件夹成功！",
                        timeout: "1500",
                    });
                    this.isRenameFolder = false;
                    this.reloadFile();
                } else {
                    this.$q.notify({
                        color: "red-5",
                        textColor: "white",
                        icon: "warning",
                        position: "top",
                        timeout: "1500",
                        message: "重命名文件夹失败！",
                    });
                }
            });
        },
        handleDeleteFolder() {},
        handleCreateFolderPop() {
            this.isCreateFolder = true;
        },
        createFolder() {
            let data = {
                vc_name: this.folderName,
                pid: this.pid,
                vc_parentId: 0,
            };
            createFolder(data)
                .then((res) => {
                    if (res.data.code == 1) {
                        this.isCreateFolder = false;
                        this.$q.notify({
                            color: "light-green-4",
                            icon: "far fa-check-circle",
                            position: "top",
                            textColor: "white",
                            message: "新建文件夹成功！",
                            timeout: "1500",
                        });
                        this.isUploadMenu = false;
                        this.loadFolderList();
                        this.handleVideoCard();
                    } else {
                        this.$q.notify({
                            color: "red-5",
                            textColor: "white",
                            icon: "warning",
                            position: "top",
                            timeout: "1500",
                            message: "新建文件夹失败！",
                        });
                    }
                })
                .catch((err) => {});
        },
        loadFolderList() {
            loadFolderList({
                pid: this.pid,
            }).then((res) => {
                if (res.data.code == 1) {
                    let data = res.data.data;
                    data.forEach((item, index) => {
                        item.vc_ctime = date.formatDate(item.vc_ctime, "YYYY-MM-DD HH:mm");
                        item.vc_lastModifyTime = date.formatDate(
                            item.vc_lastModifyTime,
                            "YYYY-MM-DD HH:mm"
                        );
                    });
                    this.folderList = data;
                }
            });
        },
        handleVideoCard() {
            console.log(
                "card宽",
                this.$refs["videoContainer"].clientWidth,
                this.$refs[this.filelists[0].work_id][0].$el.clientWidth
            );
            this.blockStyle.width =
                parseInt(this.$refs[this.filelists[0].work_id][0].$el.clientWidth) +
                "px";
        },
        handleshare(item) {
            let url = this.GLOBAL.appurl + "/file/" + item.work_id;
            let msg = `一方映画请您审阅《${item.name}》\n链接：${url}`;
            this.$copyText(msg)
                .then(() => {
                    this.$message.success("复制链接成功！");
                })
                .catch(() => {
                    this.$message.error("复制链接失败！");
                });
        },
        confirmrename() {
            if (!this.curvideo.newname) {
                this.$q.notify({
                    color: "red-5",
                    textColor: "white",
                    icon: "warning",
                    position: "top",
                    timeout: "1500",
                    message: "请先输入作品新名称！",
                });
                return;
            }
            let reqdata = {
                data: this.curvideo,
            };
            videoRename(reqdata).then((res) => {
                if (res.data.code == 1) {
                    this.isrename = false;
                    this.$q.notify({
                        color: "light-green-4",
                        icon: "far fa-check-circle",
                        position: "top",
                        textColor: "white",
                        message: "重命名成功！",
                        timeout: "1500",
                    });
                    this.loadfilelists();
                } else {
                    this.$q.notify({
                        color: "red-5",
                        textColor: "white",
                        icon: "warning",
                        position: "top",
                        timeout: "1500",
                        message: "重命名失败！",
                    });
                }
            });
        },
        handlerename(item) {
            this.isrename = true;
            this.curvideo.work_id = item.work_id;
            this.curvideo.name = item.name;
        },
        handledelete(item) {
            this.$q
                .dialog({
                    title: "提示",
                    message: "确认删除视频吗？",
                    cancel: true,
                    persistent: true,
                })
                .onOk(() => {
                    let reqdata = {
                        work_id: item.work_id,
                    };
                    deleteVideo(reqdata)
                        .then((res) => {
                            if (res.data.code == 1) {
                                this.$q.notify({
                                    color: "light-green-4",
                                    icon: "far fa-check-circle",
                                    position: "top",
                                    textColor: "white",
                                    message: "删除视频成功！",
                                    timeout: "1500",
                                });
                                this.loadfilelists();
                            } else {
                                this.$q.notify({
                                    color: "red-5",
                                    textColor: "white",
                                    icon: "warning",
                                    position: "top",
                                    message: "删除失败！",
                                });
                            }
                        })
                        .catch(() => {
                            this.$q.notify({
                                color: "red-5",
                                textColor: "white",
                                icon: "warning",
                                position: "top",
                                message: "删除失败！",
                            });
                        });
                })
                .onOk(() => {
                    // console.log('>>>> second OK catcher')
                })
                .onCancel(() => {
                    // console.log('>>>> Cancel')
                })
                .onDismiss(() => {
                    // console.log('I am triggered on both OK and Cancel')
                });
        },
        handlevideo(item) {
            if (!item.m3u8url) {
                this.$q.notify({
                    color: "red-5",
                    textColor: "white",
                    icon: "warning",
                    position: "top",
                    timeout: "1500",
                    message: "作品转码中，稍后刷新重试！",
                });
            } else if (item.m3u8url) {
                if (this.isWechat) {
                    wx.miniProgram.navigateTo({
                        url: `/pages/project/studio/file/file?workid=${item.work_id}`,
                    });
                } else {
                    this.$router.push("/file/" + item.work_id);
                }
            }
        },
        loadfilelists() {
            let serveurl = this.GLOBAL.serveurl;
            let reqdata = {
                pid: this.pid,
            };
            loadfilelist(reqdata).then((res) => {
                this.isLoadData = false;
                let filelistdata = res.data.data;
                let newFilelist = [];
                if (filelistdata.length > 0) {
                    filelistdata.forEach((item, index) => {
                        if (item.pv_id == 0) {
                            let ctime = date.formatDate(item.ctime, "YYMMDD");
                            if (!item.name) {
                                item.name = ctime + "-" + storage.getItem(this.pid).name;
                            }
                            item.version = index + 1;
                            item.ctime = date.formatDate(item.ctime, "YYYY-MM-DD HH:mm");
                            if (item.videoinfo) {
                                item.videoinfo = JSON.parse(item.videoinfo);
                                let duration = item.videoinfo.format.duration;
                                let bitrate = item.videoinfo.format.bit_rate;
                                let newbitrate =
                                    Math.floor((bitrate / 1024 / 1024) * 100) / 100 + "mbps";
                                let size = item.videoinfo.format.size;
                                let newsize = Math.floor((size / 1024 / 1024) * 100) / 100 + "MB";
                                let newduration = getSeconds(duration);
                                item.videoinfo.format.duration = newduration;
                                item.videoinfo.format.bit_rate = newbitrate;
                                item.videoinfo.format.size = newsize;
                            } else {

                                item.videoinfo.format.duration = '未知';
                                item.videoinfo.format.bit_rate = '未知';
                                item.videoinfo.format.size = '未知';
                            }

                            if (!item.thumbnail) {
                                let backimg = {
                                    backgroundImage: "url(" + serveurl + "/upload/preview.jpg)",
                                    backgroundPosition: " 0px 0px",
                                    backgroundSize: "auto 100%",
                                };
                                item.backimg = backimg;
                            } else if (item.thumbnail) {
                                let backimg = {
                                    backgroundImage: "url(" + serveurl + item.thumbnail + ")",
                                    backgroundPosition: " 0px 0px",
                                    backgroundSize: "auto 100%",
                                };
                                item.backimg = backimg;
                            }
                            newFilelist.push(item);
                        }
                    });
                    this.filelists = newFilelist;
                }
            });
        },
        handlestart() {},
        handleuploaded(info) {
            let res = JSON.parse(info.xhr.response);
            console.log(res);
            if (res.code == 1) {
                this.$q.notify({
                    color: "light-green-4",
                    icon: "far fa-check-circle",
                    position: "top",
                    textColor: "white",
                    message: "上传成功！",
                    timeout: "1500",
                });
                this.loadfilelists();
            }
        },
        handlepreview(evt, item, index) {
            if (this.$q.platform.is.desktop) {
                item.isprogressshow = true;
                let x = evt.layerX;
                let containerwidth = this.$refs[item.work_id][0].$el.clientWidth;
                let curposition = Math.floor((x / containerwidth) * 100);
                let img = new Image();
                img.src = item.backimg.backgroundImage
                    .replace("url(", "")
                    .replace(")", "");
                const vm = this;
                img.onload = function () {
                    vm.$set(vm.imgInfo, "width", img.width);
                    vm.$set(vm.imgInfo, "height", img.height);
                };
                let imgs = this.imgInfo.width / 320;
                let percent = parseInt(100 / imgs);

                let curimg = Math.floor(curposition / percent);
                item.progress = Math.ceil(curimg * percent + 5) / 100;
                let offsetimg = curimg - 1;
                item.backimg.backgroundPosition =
                    "-" + offsetimg * containerwidth + "px 0px";
            }
        },
        handlemouseout(evt, item) {
            if (this.$q.platform.is.desktop) {
                item.isprogressshow = false;
                item.backimg.backgroundPosition = "0px 0px";
            }
        },
        getImgInfo() {},
    },
};
</script>

<style lang="scss">
.tipsfont {
    font-size: 12px;
    color: grey;
}

.bg-tm {
    background-color: rgba(82, 82, 82, 0.7);
}

.el-upload-dragger {
    min-width: 200px;
    max-width: 350px;
}
</style>
